/*
 * @Descripttion: 渲染列处理函数
 * @version: v1.0
 * @Author: 233
 * @Date: 2020-08-11 15:00:16
 * @LastEditors: 233
 * @LastEditTime: 2021-06-11 15:28:49
 */


import XEUtils from "xe-utils";
import { Message } from 'element-ui'


/** 
 * 提示函数 
 * 禁止点击蒙层、显示一秒后关闭
 */
 const tip = msg => {    
  Message({
    message: msg || 'warning',
    type: 'warning',
    duration: 1 * 1000
  })
}


/**
 * 判断多选和单选
 * @param {*} columns 
 * @returns 
 */
function getColumnsSelectType(columns) {

  const len = columns.length;
  console.log('ColumnInfo ColumnInfo ',columns[0].type);
  for (let i = 0; i < len; i++) {
    let column = columns[i];
    console.log(column);
    if (column.type && column.type == "radio") {
      console.log('radioradioradioradioradio');
      return "radio";
    } else if (
      column.type &&
      (column.type == "selection" || column.type == "checkbox")
    ) {
      return "checkbox";
    }
  }
  return false;
}


/**
 * @name: renderColHandler
 * @description: 渲染列
 * @param {function} h: createElement渲染函数
 * @param {array}} columnsData: 列配置项
 * @return {VNode}
 */
export const renderColHandler = function(h, columnsData) {
  return columnsData.map(function(item) {
    if (item.children && item.children.length > 0) {
      return h(
        "vxe-table-column",
        {
          props: {
            title: item.title,
            field: item.field ? item.field : item.title
          }
        },
        renderColHandler(h, item.children)
      );
    } else {
      Object.defineProperty(item, "scopedSlots", { enumerable: false });
      if (item.type && item.type == "radio") {
        return h("vxe-table-column", {
          props: {
            ...item
          },
          scopedSlots: {
            header: props => {
              return (
                <el-button
                  type={"text"}
                  vOn:click={props.$table.clearRadioRow}
                  style="padding: 2px 0;"
                >
                  <i class={"el-icon-close"} style={"font-size: 18px;"}></i>
                </el-button>
              );
            }
          }
        });
      } else {
        return h("vxe-table-column", {
          props: {
            ...item
          },
          scopedSlots: {
            ...item.scopedSlots
          }
        });
      }
    }
  });
};

/**
 * @name: renderPaginationHandler
 * @description: 渲染分页器
 * @param {function} h: createElement渲染函数
 * @param {object} pageConfig: 分页器配置项
 * @param {boolean} hasPage: 是否分页
 * @return {VNode}
 */
export const renderPaginationHandler = function(
  h,
  pageConfig,
  hasPage,
  pageChange
) {
  if (hasPage) {
    return h("vxe-pager", {
      props: {
        ...pageConfig
      },
      scopedSlots: {
        left: props => {
          return pageConfig.left && pageConfig.left(h, props);
        },
        right: props => {
          return pageConfig.right && pageConfig.right(h, props);
        }
      },
      on: {
        "page-change": pageChange
      },
      ref: "pagination"
    });
  } else {
    return h("div");
  }
};


/**
 * 增加操作列按钮
 * template：<el-button size="mini" @click="handleCreate" type="diyfirst">{{ $t('base.add') }}</el-button>
 * @param {*} h 
 * @param {*} children 
 * @param {*} params 
 * @returns 
 */
export const renderDiyOperationColumn = function(h, children,params) {
  if (children && children.length > 0) {
    return children.map(function(item) {
      if (item.nativeType && item.nativeType === 'el-button') {
        // console.log("杉树",item.events.click);
        return h(
          "el-button",
          {
            props: {
              ...item.props
            },
            on: {
              'click': () => item.events.click(params)
            },
          },
          item.content
        )
      }

      if (item.nativeType && item.nativeType === 'el-popconfirm') {
        return [
          <el-popconfirm
                confirm-button-text={item.props.popconfirm.confirmButtonText}
                cancel-button-text={item.props.popconfirm.cancelButtonText}
                icon={item.props.popconfirm.icon}
                icon-color={item.props.popconfirm.iconColor}
                title={item.props.popconfirm.title}
                confirm={item.events.confirm}
              >
              <el-button slot={item.props.elbutton.slot} size={item.props.elbutton.size} type={item.props.elbutton.type}>{item.content}</el-button>
          </el-popconfirm>
        ]
      }
      
    })
  }

};

/**
 * 表格右侧工具栏渲染
 * @param {*} h 
 * @param {*} children 
 * @param {*} params 
 * @returns 
 */
export const renderToolbarToolsSlots = function(h,$grid,toolsParams) {

  // const toolsParams = [
  //   // 新增按钮
  //   { 
  //     toolRender: { 
  //     name: 'ButtonElDiy',
  //     diyProps:{isCheckSelected:false,btName:"新增"},
  //     props: {type: 'diyfirst',size:'mini'},
  //     events: { click: this.btnDownEvent }
  //     } 
  //   },
  //   { 
  //     toolRender: { 
  //     name: 'ButtonElDiy',
  //     diyProps:{isCheckSelected:true,btName:"属性"},
  //     props: {type: 'primary',size:'mini'},
  //     events: { click: this.btnDownEvent }
  //     } 
  //   },
  //   { 
  //     toolRender: { 
  //     name: 'ButtonElDiy',
  //     diyProps:{isCheckSelected:true,btName:"方案设置"},
  //     props: {type: '',size:'mini'},
  //     events: { click: this.btnDownEvent }
  //     } 
  //   },
  // ]

  if (toolsParams && toolsParams.length > 0) {
    return toolsParams.map((item) => {
      const { name,diyProps,props,events } = item.toolRender
      let columns,selectType,iconHtmlLeft,iconHtmlRight,rows={};
      // 是否需要判断选中rows
      let isCheckSelected = diyProps.isCheckSelected || false;
      // 获取所有列
      columns = $grid.getColumns()
      // icon图标
      if (!XEUtils.isEmpty(diyProps.iconClass) && diyProps.inonPosition==='left') {
        iconHtmlLeft = (<i class={diyProps.iconClass}></i>) 
      }
      if (!XEUtils.isEmpty(diyProps.iconClass) && diyProps.inonPosition==='right') {
        iconHtmlRight = (<i class={diyProps.iconClass}></i>) 
      }
      // 适配渲染样式：elementui-button
      if (name === 'ButtonElDiy') {
        return [
          <el-button size={props.size} type={props.type} onClick={
            () => {
              // 是否需要判断获取数据
              if (isCheckSelected && columns) {
                // 获取selected类型：单选、多选
                selectType = getColumnsSelectType(columns)
                if (selectType === 'radio') {
                    rows = $grid.getRadioRecord()
                } else if (selectType === 'checkbox') {
                    rows = $grid.getCheckboxRecords()
                }

                if (XEUtils.isEmpty(rows)){
                  tip('请先选择操作项！');
                }else{
                  events.click({rows,toolRender:item.toolRender})
                }

              } else{
                events.click({rows,toolRender:item.toolRender})
              }
            }
          }>
          { iconHtmlLeft }
          {diyProps.btName}
          { iconHtmlRight }
          </el-button>
        ]
      }
    })
  }

  // return (
  //       <vxe-input placeholder="天兵宝宝bbb"></vxe-input>
  //     );

  // if (children && children.length > 0) {
  //   return children.map(function(item) {
  //     if (item.nativeType && item.nativeType === 'el-button') {
  //       // console.log("杉树",item.events.click);
  //       return h(
  //         "el-button",
  //         {
  //           props: {
  //             ...item.props
  //           },
  //           on: {
  //             'click': () => item.events.click(params)
  //           },
  //         },
  //         item.content
  //       )
  //     }

  //     if (item.nativeType && item.nativeType === 'el-popconfirm') {
  //       return [
  //         <el-popconfirm
  //               confirm-button-text={item.props.popconfirm.confirmButtonText}
  //               cancel-button-text={item.props.popconfirm.cancelButtonText}
  //               icon={item.props.popconfirm.icon}
  //               icon-color={item.props.popconfirm.iconColor}
  //               title={item.props.popconfirm.title}
  //               confirm={item.events.confirm}
  //             >
  //             <el-button slot={item.props.elbutton.slot} size={item.props.elbutton.size} type={item.props.elbutton.type}>{item.content}</el-button>
  //         </el-popconfirm>
  //       ]
  //     }
      
  //   })
  // }

};

/**
 * elementui分页组件渲染
 * @param {*} h 
 * @param {*} pageOptDef 
 * @param {*} pageConfig 
 * @param {*} pageOptDefOn 
 * @returns 
 */
export const renderElPaginationHandler = function(h, pageOptDef,pageConfig,pageOptDefOn) {
  if (!XEUtils.isUndefined(pageConfig.total) && pageConfig.total!==0) {
    return [
      <div class="pagination-container">
        <el-pagination
          style={"text-align:right"}
          small={pageOptDef.small}
          background={pageOptDef.background}
          current-page={pageConfig.currentPage} 
          {...{on:{
            "update:current-page": val => { console.log('update:current-pageupdate:current-page',val);  pageConfig.currentPage = val },
            "update:page-size": val => pageConfig.pageSize = val,
            "size-change": pageOptDefOn["size-change"],
            "current-change": pageOptDefOn["current-change"]
          }}}
          page-size={pageConfig.pageSize} 
          layout={pageOptDef.layout}
          page-sizes={pageOptDef.pageSizes}
          total={pageConfig.total}
          // vOn:size-change={pageOptDefOn["size-change"]}
          // vOn:current-change={pageOptDefOn["current-change"]}
        />
      </div>
    ]
  }
}
